<template>
  <el-dialog :visible.sync="isShow" append-to-body>
    <Parser
      v-if="formConf.fields.length > 0"
      :key="keys"
      :form-conf="formConf"
    />
    <el-form ref="form" :model="fields" label-width="80px">
      <el-form-item label="备注" prop="comment">
        <el-input v-model="comment" autocomplete="off" size="small" type="textarea" placeholder="备注" maxlength="256" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onOkBtnClick">
        通过
      </el-button>
      <el-button type="danger" @click="onOkBtnClick">
        驳回
      </el-button>
      <el-button @click="resetForm">
        重置
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { get } from '@/api/form'
import { apply } from '@/api/activiti/task'
import { getDetail } from '@/api/groupdata'
import Parser from '@/components/FormGenerator/components/parser/Parser'
export default {
  components: { Parser },
  props: {
    value: {
      type: Object,
      default: () => Object.create({})
    }
  },
  data() {
    return {
      keys: +new Date(),
      formConf: { fields: [] },
      isShow: true,
      fields: {},
      rules: {},
      editData: {},
      comment: '',
      formData: {}
    }
  },
  watch: {
    isShow: function() {
      this.$emit('input', null)
    }
  },
  created() {
    this.getData(this.value.formId || null)
  },
  methods: {
    onOkBtnClick() {
      this.submitForm()
    },
    submitForm(formValue) {
      this.formData.taskId = this.value.id
      this.formData.comment = this.comment
      apply(this.formData).then(() => {
        this.isShow = false
        this.$parent.onSearchBtnClick()
      })
    },
    resetForm() {
      this.$refs['form'].resetFields()
    },
    async getData(id) {
      await get(id).then(data => {
        this.formConf = JSON.parse(data.content)
        this.formConf.fields.forEach(item => {
          item.disabled = true
        })
        this.formConf.formBtns = false
        // console.log(this.formConf)
        setTimeout(() => {
          this.handlerInitEditData()
        }, 100)
      })
    },
    handlerInitEditData() {
      getDetail(this.value.did).then((data) => {
        const datas = JSON.parse(data.value)
        datas.fields.forEach(item => {
          this.formData[item.name] = item.value
        })
        // 回填数据
        this.fillFormData(this.formConf, this.formData)
        // 更新表单
        this.keys = +new Date()
      })
    },
    fillFormData(form, data) {
      form.fields.forEach(item => {
        const val = data[item.__vModel__]
        if (val) {
          item.__config__.defaultValue = val
        }
      })
    },
    buildFormPram(formValue) {
      const _pram = {
        gid: this.value.gid,
        form: {
          fields: [],
          id: this.value.formId,
          sort: this.fields.sort,
          status: this.fields.status
        }}
      const _fields = []
      Object.keys(formValue).forEach((key) => {
        _fields.push({
          name: key,
          title: key,
          value: formValue[key]
        })
      })
      _pram.form.fields = _fields
      return _pram
    }
  }
}
</script>
